<template>
  <div class="h-button">
    <el-button
      :class="'h-icon-button' + (size ? ' h-icon-button-' + size : '') + (on ? ' on' : '')"
      type="text"
      :disabled="disabled"
      :icon="icon"
      @click="$emit('click')"
    >
      <slot />
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'IconButton',
  props: {
    icon: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    on: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped lang="scss">
@mixin buttonTheme() {
  display: inline-block;
  vertical-align: middle;
  .h-icon-button {
    font-size: 16px;
    padding: 5px;
    color: white;
    vertical-align: middle;

    &.is-disabled {
      cursor: not-allowed;
      background-image: none;
      background-color: transparent;
      color: #FFFFFF;
      opacity: .4;

      &:hover {
        background-color: transparent;
        color: #FFFFFF;
      }

      &.on:hover {
        background: rgba(0, 0, 0, .8);
        color: #409EFF;
      }
    }

    &.h-icon-button-mini {
      font-size: 12px;
    }

    &.h-icon-button-small {
      font-size: 14px;
    }

    &:hover, &.on {
      background: rgba(0, 0, 0, .8);
      color: #409EFF;
    }
  }
}

.h-button + .h-button {
  margin-left: 10px;
}

.h-button /deep/ {
  @include buttonTheme;
}
</style>